<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>

<body style="text-align: center;">
    <h1>Vue Learn 1</h1>
    <h3> 声明式渲染 {{}} v-bind</h3>
    <div id="app">{{mes}}
        <br>
        <h3>条件与循环 v-for v-if</h3>
        <ul>
            <li v-for="item in movlist">{{item}}</li>
        </ul>
    </div>
    <div id="app1">

        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <br>
        <span v-if="seen">Are you look ?{{ms}}</span>
        <br>
        <button v-on:click="changeseen">Chilk me</button>
        <ol>
            <li v-for="todo in todos">
                {{ todo.tx }}
            </li>
            <!-- 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。 -->
        </ol>

        <span>

        </span>

        <!-- Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 -->
    </div>
    <div id="app2">
        <h3>处理用户输入 v-on:cilck v-model</h3>
        <button @click="reverseMessage">
            {{message}}
        </button>
        <br>
        <span>{{modelmes}}</span>

        <input type="text" v-model="modelmes">
        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>
        </ol>
    </div>
    <h3>APP3</h3>
    <div id="app3">
        <ol>
            <!--
              现在我们为每个 todo-item 提供 todo 对象
              todo 对象是变量，即其内容可以是动态的。
              我们也需要为每个组件提供一个“key”，稍后再
              作详细解释。
            -->
            <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">

            </todo-item1>
        </ol>
    </div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 引入Vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            mes: 'Hello World',
            movlist: ['花木兰', '战狼', '战狼3', '不良人']
        }
    })
    var app1 = new Vue({
        el: '#app1',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString(),
            ms: "测试",
            seen: 'true',
            todos: [{
                tx: "VUE"
            }, {
                tx: "Learn"
            }, {
                tx: "Project"
            }]

        },
        methods: {
            changeseen: function() {
                this.ms = '变';
                this.seen = false;
            }
        }
    })

    // 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
    // 在 Vue 中注册组件很简单：
    Vue.component('todo-item', {

        template: '<li>这是个待办项</li>'
    })
    Vue.component('todo-item1', {
        // todo-item1 组件现在接受一个
        // "prop"，类似于一个自定义 attribute。
        // 这个 prop 名为 todo。
        props: ['todo'],
        template: '<li>{{ todo.tx }}+{{todo.id}}</li>'
    })

    var app2 = new Vue({

        el: '#app2',
        data: {
            message: "我变",
            modelmes: "v-model绑定元素",
        },
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })


    var app3 = new Vue({
        el: '#app3',
        data: {
            groceryList: [{
                id: 0,
                tx: "蔬菜"
            }, {
                id: 1,
                tx: "milk"
            }, {
                id: 2,
                tx: "everything"
            }]
        }

    })
</script>

</html>